<template>
	<div class="page-u">
		<div class="center">
			
			<el-row type="flex">
				<el-col class="col-card-form" :xs="24" :sm="12">
					<div class="bg-price-title">
						<span>价格</span>
					</div>
				</el-col>
			</el-row>
			<el-row type="flex">
				<el-col class="col-card-form" :xs="24" :sm="12">
					<div class="app-note">
						<span>未注册的用户每天免费使用 2 次，注册用户每天可免费使用 5 次。</span>
						<!-- ，超出额度请购买使用次数 -->
					</div>
				</el-col>
			</el-row>
			<el-row type="flex">
				<el-col class="card-bg-sy" :xs="24" :sm="22" :md="22">
					<el-card class="box-card">
						<el-row>
							<el-col :xs="24" :sm="15" :md="15">
								<el-row>
									<el-col class="c-ffsy" :span="12">付费使用</el-col>
								</el-row>
								<el-row>
									<el-col class="c-sm-gpt" :xs="24" :sm="24" :md="24">OpenAPP 项目需要负担高昂的服务器成本和 OpenAI API 成本，如果OpenAPP
										有帮助到您，请考虑付费使用。</el-col>
								</el-row>
								<el-row>
									<el-col :xs="24" :sm="24" :md="24">
										<el-divider content-position="left"><span class="c-ffnr">付费功能包括</span></el-divider>
									</el-col>
								</el-row>
								<el-row>
									<el-col class="c-nr-sm" :xs="24" :sm="12" :md="12">
										<i class="el-icon-check"></i>
										更多的使用次数
									</el-col>
									<el-col class="c-nr-sm" :xs="24" :sm="12" :md="12">
										<i class="el-icon-check"></i>内容长度加倍 </el-col>
								</el-row>
								<el-row>
									<el-col class="c-nr-sm c-last" :xs="24" :sm="12" :md="12">
										<i class="el-icon-check"></i><span>专线 API 服务，更稳定</span>
									</el-col>
								</el-row>
							</el-col>
							<el-col :xs="24" :sm="9" :md="9">
								<el-card class="pay-card-detail">
									<el-row class="xs-6">
										<el-col :xs="24" :sm="24" :md="24">
										限时6折
										</el-col>
									</el-row>
									<el-row class="xs-col">
										<el-col :xs="24" :sm="24" :md="24">
										<span class="p-c-span">$3</span>
										50 次
										</el-col>
									</el-row>
									<el-row class="xs-col">
										<el-col :xs="24" :sm="24" :md="24">
										<span class="p-c-span">$6</span>
										120 次
										</el-col>
									</el-row>
									<el-row >
										<el-col class="xs-col" :xs="24" :sm="24" :md="24">
										<span class="p-c-span">$12</span>
										300 次
										</el-col>
									</el-row>
									<el-row>
											<el-col :xs="24" :sm="24" :md="24">
												<el-button class="el-btn-pay" type="primary" @click="payNow" round>购买</el-button>
											</el-col>
											<el-col :xs="24" :sm="24" :md="24">
												<el-divider content-position="center">Or</el-divider>
											</el-col>
											<el-col :xs="24" :sm="24" :md="24">
												<el-button class="el-btn-pay-ok" @click="payNow" round>已购买点击这里</el-button>
											</el-col>
									</el-row>
									<el-row>

									</el-row>
								</el-card>
							</el-col>
						</el-row>
					</el-card>
				</el-col>
			</el-row>

		</div>
	</div>
	
	
</template>
<script>
	export default {
		name: 'Footer',

		data() {
			return {

			}
		},
		methods: {
			/* 购买 */
			payNow(){
				this.$message({
					message: "敬请期待。。。",
					type: "success",
					duration: 1500,
				});
			}

		}
	}
</script>

<style scoped>
	@import '../../static/css/Usage.css'
</style>
